<template>
  <div class="page-head">
    <n-breadcrumb class="breadcrumb">
      <n-breadcrumb-item>Mysql配置</n-breadcrumb-item>
    </n-breadcrumb>
  </div>
  <div class="page-container">
    <n-space vertical>
      <!-- 搜索条件 -->
      <n-form inline label-placement="left" label-width="auto" autocomplete="off">
        <n-form-item>
          <n-button type="primary" @click="onClickAdd">新增</n-button>
        </n-form-item>
      </n-form>

      <!-- 数据表 -->
      <n-data-table remote pagination-behavior-on-filter="first" :columns="columns" :data="dataSource" striped/>

    </n-space>
  </div>

  <!-- 新增、编辑 -->
  <n-modal v-model:show="visible" :show-icon="false" preset="dialog" title="编辑" positive-text="确认"
           negative-text="取消"
           @positive-click="handleOk" @negative-click="handleCancel" :mask-closable="false">
    <n-form ref="putRef" label-placement="left" label-width="auto" :model="putState" :loading="confirmLoading"
            autocomplete="off" class="pt10">
      <n-form-item label="driverClassName" path="driverClassName"
                   :rule="{ required: true, message: 'driverClassName!', trigger: ['blur'] }">
        <n-input v-model:value="putState.driverClassName" placeholder="driverClassName!"/>
      </n-form-item>
      <n-form-item label="jdbcUrl" path="jdbcUrl"
                   :rule="{ required: true, message: 'jdbcUrl!', trigger: ['blur'] }">
        <n-input v-model:value="putState.jdbcUrl" type="textarea" placeholder="jdbcUrl!"/>
      </n-form-item>
      <n-form-item label="username" path="username"
                   :rule="{ required: true, message: 'username!', trigger: ['blur'] }">
        <n-input v-model:value="putState.username" placeholder="username!"/>
      </n-form-item>
      <n-form-item label="password" path="password"
                   :rule="{ required: true, message: 'password!', trigger: ['blur'] }">
        <n-input v-model:value="putState.password" placeholder="password!"/>
      </n-form-item>
    </n-form>
  </n-modal>

</template>

<script setup lang="ts">
import {computed, h, reactive, ref, toRaw} from 'vue';
import {useRequest} from 'vue-request';
import {getMysqlConfigList, saveMysqlConfig, sendMysqlTest} from '../../config/api';
import {FormInst, NButton, NInput, useDialog, useMessage} from "naive-ui";

const dialog = useDialog()
const message = useMessage()

const columns = [
  {title: 'ID', key: 'id', sorter: false, width: '8%'},
  {title: 'driverClassName', key: 'driverClassName', width: '12%'},
  {title: 'jdbcUrl', key: 'jdbcUrl', width: '6%'},
  {title: 'username', key: 'username'},
  {title: 'password', key: 'password'},
  {
    title: '操作', key: 'action', render(row: any) {
      return h('div', {class: 'flex items-center'}, [
        h(NButton, {size: 'small', class: 'm2', onClick: () => onClickEdit(row)}, {default: () => '编辑'}),
        h(NButton, {size: 'small', class: 'm2', type: 'error', onClick: () => onClickSendTest(row)}, {default: () => '调试'}),
        // h(NButton, { size: 'small', class: 'm2', type: 'error', onClick: () => { } }, { default: () => '删除' }),
      ])
    }
  },
];

const {data, run} = useRequest(getMysqlConfigList, {});
const dataSource = computed(() => data.value || []);


const initFormData = () => ({
  "id": '',
  "driverClassName": "",
  "jdbcUrl": "",
  "username": "",
  "password": "",
});

//新增编辑
const putState = reactive(initFormData());
const putRef = ref<FormInst | null>(null);
const visible = ref(false);
const confirmLoading = ref(false);

const onClickAdd = () => {
  Object.assign(putState, initFormData());
  visible.value = true;
}

const onClickEdit = (record: any) => {
  let rawData = toRaw(record);
  Object.assign(putState, {
    id: rawData.id,
    driverClassName: rawData.driverClassName,
    jdbcUrl: rawData.jdbcUrl,
    username: rawData.username,
    password: rawData.password,
  })
  visible.value = true;
}

const handleOk = () => {
  putRef.value?.validate((errors) => {
    if (!errors) {
      confirmLoading.value = true;
      saveMysqlConfig(toRaw(putState)).then((res: any) => {
        visible.value = false;
        putRef.value?.restoreValidation();
        run({});
      }).catch((msg: any) => {
        message.error(msg || '未知错误');
      }).finally(() => {
        confirmLoading.value = false;
      })
    }
  }).catch(ex => {
  })
  return false;
};

const handleCancel = () => {
  putRef.value?.restoreValidation();
}

const msgText = ref("");

const onClickSendTest = (record: any) => {
  let rawData = toRaw(record);
  dialog.error({
    title: '测试文本',
    content: () => h(NInput, {
      placeholder: '请输入测试文本', value: msgText.value, onUpdateValue: (val: any) => {
        msgText.value = val
      },
    }),
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: () => {
      if (msgText.value) {
        sendMysqlTest({id: rawData.id, msg: msgText.value}).then(() => {
          msgText.value = '';
        });
      }
    },
  });

}
</script>

<style lang="less" scoped>
</style>
